import { APIGoodsSwi } from './fetch.js'
import { login, NavSearch, Search } from './tools.js'


$('.footer').load('../../layout/footer.html')
$('.header').load('../../layout/header.html', function () {

    login();

    NavSearch();

    Search();
  
     $('.cart').click(function(){
       location.href='../../html/cart.html'
     })
    
})


//广告轮播
let mySwiper = new Swiper('.swiper-container', {
    autoplay: true,
    autoplay: {
        delay: 2000,//1秒切换一次
        disableOnInteraction: false,
    },
    loop: true, // 循环模式选项
    // initialSlide :1,
    // speed:200,

    effect: 'fade',

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
        clickable: true,
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})


//商品轮播
let swiper = new Swiper('.swiper-newItem', {

    autoplay: true,
    autoplay: {
        delay: 3000,//1秒切换一次
        disableOnInteraction: false,
    },
    // loop: true, // 循环模式选项


    slidesPerView: 4,
    spaceBetween: 20,
 
    observer: true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents: true,//修改swiper的父元素时，自动初始化swiper

    navigation: {
        nextEl: '.swi-newItem-n',
        prevEl: '.swi-newItem-p',
    },
});

//导航按钮
$('.swiper-newItem').on('mouseenter',function(){
    $('.swi-newItem-p').css('display','block');
    $('.swi-newItem-n').css('display','block');
})
$('.swiper-newItem').on('mouseleave',function(){
    $('.swi-newItem-p').css('display','none');
    $('.swi-newItem-n').css('display','none');
})

async function getGoods() {
    let { data } = await APIGoodsSwi();
    let html = '';
    $.each(data, (index, { img, gname, price, gid }) => {
        html += `    
          <div class="swiper-slide">       
        <a href="../../html/detail.html?gid=${gid}">
         <div class="m">
             <img class="img" src="${img}" alt="">
          </div> 
      <p class="p">${gname}</p>
      <span class="span">￥${price}</span>
      </a>
    </div>
   
  `
    })
    $('.swi-newItem').html(html);
}
getGoods();


//商品列表渲染
async function GetGoods() {
    let { data } = await APIGoodsSwi();
    let html = '';
    $.each(data, (index, { img, gname, price, gid }) => {
        html += `      
        <div class="goods-list">
        <a href="../../html/detail.html?gid=${gid}">  
          <div class="m">
          <img src="${img}" alt="">
          </div>  
        <p>${gname}</p>
        <span>￥${price}</span>
        </a>
    </div>
   
  `
    })
    $('.goods').html(html);
}
GetGoods();

